<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-02-10 13:42:54
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-07 10:05:35
-->
<template>
  <div class="app-container">
    <div class="vipTips" v-if="!isVip">
      <div class="vipTips-title">
        会员已到期,到期后仍可访问,部分功能不可使用,建议尽快购买会员.
      </div>
      <div>
        <el-button size="default" plain @click="qrShow">联系客服</el-button>
      </div>
    </div>
    <div class="header-img">
      <div class="header-img-left">
        <div class="avatar">
          <img :src="avatar" alt="" />
        </div>
        <div class="header-img-left-text">
          <h1>您好，欢迎登录Saas企业端</h1>
          <div>专为企业服务而生的一站式企业咨询与技能培训服务平台</div>
        </div>
      </div>
      <div class="header-img-right">
        <img src="@/assets/images/image-right.jpg" alt="" />
        <div class="right-img">
          <img src="@/assets/images/right-img.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="Overview">
      <div class="Overview-top">
        <div class="Overview-top-title">证书资质总览</div>
        <div>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{ orderTitle }}
              <i class="iconfont icon-xiala"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="expTimeChange(item)"
                v-for="item in TimeOptions"
                :key="item.value"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{ orderUserTitle }}
              <i class="iconfont icon-xiala"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="expUserChange(item)"
                v-for="item in UserOptions"
                :key="item.value"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="Overview-detail">
        <div class="Overview-detail-single">
          <div class="Overview-detail-single-top">证书总量</div>
          <div class="Overview-detail-single-bottom">
            <span>{{ npData.certSum }}</span>
          </div>
        </div>
        <div class="Overview-detail-single">
          <div class="Overview-detail-single-top">资质总量</div>
          <div class="Overview-detail-single-bottom">
            <span>{{ npData.qualSum }}</span>
          </div>
        </div>
        <div class="Overview-detail-single">
          <div class="Overview-detail-single-top">新增证书</div>
          <div class="Overview-detail-single-bottom">
            <span>{{ npData["certificate"].date }}</span>
            <i
              class="iconfont icon-shangsheng active"
              v-if="npData['certificate'].percentage >= 0"
            >
              {{ npData["certificate"].percentage | positive }}
            </i>
            <i class="iconfont icon-xiajiang active1" v-else>
              {{ npData["certificate"].percentage | negative }}
            </i>
          </div>
        </div>
        <div class="Overview-detail-single">
          <div class="Overview-detail-single-top">新增资质</div>
          <div class="Overview-detail-single-bottom">
            <span>{{ npData["qualification"].date }}</span>
            <i
              class="iconfont icon-shangsheng active"
              v-if="npData['qualification'].percentage >= 0"
            >
              {{ npData["qualification"].percentage | positive }}
            </i>
            <i class="iconfont icon-xiajiang active1" v-else>
              {{ npData["qualification"].percentage | negative }}
            </i>
          </div>
        </div>
        <div class="Overview-detail-single">
          <div class="Overview-detail-single-top">新增借还</div>
          <div class="Overview-detail-single-bottom">
            <span>{{ npData["borrowReturn"].date }}</span>
            <i
              class="iconfont icon-shangsheng active"
              v-if="npData['borrowReturn'].percentage >= 0"
            >
              {{ npData["borrowReturn"].percentage | positive }}
            </i>
            <i class="iconfont icon-xiajiang active1" v-else>
              {{ npData["borrowReturn"].percentage | negative }}
            </i>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-left">
        <div class="footer-left-top">
          <div class="footer-left-title">证书资质预警</div>
          <div class="footer-left-sel"></div>
        </div>
        <div>
          <div class="earlyWarning" @click="waramingLook(1)">
            <div class="earlyWarning-img">
              <img src="@/assets/images/warn1.jpg" alt="" />
              <div class="earlyWarning-detail">
                <div class="earlyWarning-detail-num">
                  {{ warningData.certDueSoon }}
                </div>
                <div class="earlyWarning-detail-info">即将到期证书</div>
              </div>
            </div>
            <div class="earlyWarning-right">
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </div>
          <div class="earlyWarning" @click="waramingLook(2)">
            <div class="earlyWarning-img">
              <img src="@/assets/images/warn2.jpg" alt="" />
              <div class="earlyWarning-detail">
                <div class="earlyWarning-detail-num">
                  {{ warningData.qualDueSoon }}
                </div>
                <div class="earlyWarning-detail-info">即将到期资质</div>
              </div>
            </div>
            <div class="earlyWarning-right">
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </div>
          <div class="earlyWarning" @click="waramingLook(3)">
            <div class="earlyWarning-img">
              <img src="@/assets/images/warn3.jpg" alt="" />
              <div class="earlyWarning-detail">
                <div class="earlyWarning-detail-num">
                  {{ warningData.certOverdue }}
                </div>
                <div class="earlyWarning-detail-info">已过期证书</div>
              </div>
            </div>
            <div class="earlyWarning-right">
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </div>
          <div class="earlyWarning" @click="waramingLook(4)">
            <div class="earlyWarning-img">
              <img src="@/assets/images/warn4.jpg" alt="" />
              <div class="earlyWarning-detail">
                <div class="earlyWarning-detail-num">
                  {{ warningData.qualOverdue }}
                </div>
                <div class="earlyWarning-detail-info">已过期资质</div>
              </div>
            </div>
            <div class="earlyWarning-right">
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </div>
          <div class="earlyWarning" @click="waramingLook(5)">
            <div class="earlyWarning-img">
              <img src="@/assets/images/warn4.jpg" alt="" />
              <div class="earlyWarning-detail">
                <div class="earlyWarning-detail-num">
                  {{ warningData.borrowReturnOverdue }}
                </div>
                <div class="earlyWarning-detail-info">已过期借还</div>
              </div>
            </div>
            <div class="earlyWarning-right">
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-right">
        <div>
          <div class="footer-right-title">
            {{ echartsTitle }}
          </div>
          <div class="footer-right-sel">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ echartsText }}
                <i class="iconfont icon-xiala"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="typeMoneyChange(item)"
                  v-for="item in typeOptions"
                  :key="item.value"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ echartstime }}
                <i class="iconfont icon-xiala"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="typeTimeChange(item)"
                  v-for="item in typeTimeOPtions"
                  :key="item.value"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>

        <div id="echarts" v-loading="loading"></div>
      </div>
    </div>
    <!-- 时间选择 -->
    <el-dialog
      title="请选择时间"
      :visible.sync="timeShow"
      width="25%"
      @close="tiemClose"
    >
      <el-date-picker
        v-model="customTime"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <span slot="footer">
        <el-button @click="timeShow = false">取消</el-button>
        <el-button type="primary" @click="timeSubmit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 管理人员选择 -->
    <el-dialog
      title="人员选择"
      :visible.sync="treeShow"
      @close="userClose"
      width="30%"
    >
      <div class="TreeChioosse">
        <div class="TreeChioosse-tree">
          <div class="company" style="overflow: auto">
            <el-tree
              :data="data"
              accordion
              :props="defaultProps"
              @node-click="handleNodeClick"
              highlight-current
            >
              <template slot-scope="{ node, data }">
                <el-tooltip
                  effect="dark"
                  :content="node.label"
                  placement="top-start"
                >
                  <div class="tool">
                    <span class="comName">
                      {{ node.label }}
                    </span>
                  </div>
                </el-tooltip>
              </template>
            </el-tree>
          </div>
        </div>
        <div class="TreeChioosse-table">
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="姓名" prop="nickName"> </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="treeShow = false">取消</el-button>
        <el-button type="primary" @click="treeSubmit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 预警详细信息 -->
    <el-dialog
      :visible.sync="warningShow"
      v-if="warningShowEject"
      width="60%"
      @close="warnClose"
    >
      <div slot="title" class="dialogTitle">
        <div class="title">
          {{ warningTitle }}
        </div>
        <div class="input">
          <el-input v-model="input" :placeholder="iptPh"></el-input>
          <el-button type="primary" size="default" @click="search"
            >搜索</el-button
          >
        </div>
      </div>
      <div v-if="warningType == 1">
        <el-table :data="warnData">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column
            label="证书名称"
            fixed
            align="center"
            prop="certTypeId"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="drawer(scope.row)"
                style="font-size: 13px"
                v-hasPermi="['cert:certInfo:edit']"
              >
                {{ scope.row.certType.certName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="持有人" align="center" prop="belongerName" />
          <el-table-column
            label="身份证号"
            align="center"
            prop="idCard"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="手机号" align="center" prop="phone" />
          <el-table-column label="证书主图" align="center" prop="remark">
            <template slot-scope="scope">
              <el-image
                style="width: 100%"
                :src="scope.row.remark"
                :preview-src-list="[scope.row.remark]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="有效期"
            align="center"
            prop="certValidity"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.foreverValidity == "Y"
                  ? "永久有效"
                  : parseTime(scope.row.certValidity, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{
                scope.row.foreverValidity == "Y"
                  ? "正常"
                  : compareDate(scope.row.certValidity)
                  ? "正常"
                  : "已过期"
              }}
            </template>
          </el-table-column>
          <el-table-column label="借用状态" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{ scope.row.loan == "Y" ? "借用" : "正常" }}
            </template>
          </el-table-column>
          <el-table-column label="借用人" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{
                scope.row.loan == "Y" && scope.row.certUse
                  ? scope.row.certUse.useUser
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center" prop="directorName" />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="180"
          />
          <el-table-column label="创建人" align="center" prop="createBy" />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          />
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout=" ->,total,sizes, prev, pager, next, jumper "
          :total="total"
        >
        </el-pagination>
      </div>
      <div v-else-if="warningType == 2">
        <el-table :data="warnData">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column
            label="资质名称"
            align="center"
            fixed
            prop="qualificationTypeId"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="font-size: 13px"
                @click="drawer(scope.row)"
              >
                {{ scope.row.qualificationType.name }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="公司名称" align="center" prop="companyName" />
          <el-table-column label="资质编号" align="center" prop="certNumber" />
          <el-table-column
            label="有效期"
            align="center"
            prop="validityDate"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.foreverValidity == "Y"
                  ? "永久有效"
                  : parseTime(scope.row.validityDate, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="发证时间"
            align="center"
            prop="issueDate"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.issueDate, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发证机关" align="center" prop="issueUnit" />

          <el-table-column label="状态" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{
                scope.row.foreverValidity == "Y"
                  ? "未过期"
                  : compareDate(scope.row.validityDate)
                  ? "未过期"
                  : "已过期"
              }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="负责人" align="center" prop="directorName" />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="180"
          />
          <el-table-column label="创建人" align="center" prop="createBy" />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          />
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout=" ->,total, sizes, prev, pager, next, jumper "
          :total="total"
        >
        </el-pagination>
      </div>
      <div v-else-if="warningType == 3">
        <el-table :data="warnData">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column
            label="证书名称"
            fixed
            align="center"
            prop="certTypeId"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="drawer(scope.row)"
                style="font-size: 13px"
                v-hasPermi="['cert:certInfo:edit']"
              >
                {{ scope.row.certType.certName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="持有人" align="center" prop="belongerName" />
          <el-table-column
            label="身份证号"
            align="center"
            prop="idCard"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="手机号" align="center" prop="phone" />
          <el-table-column label="证书主图" align="center" prop="remark">
            <template slot-scope="scope">
              <el-image
                style="width: 100%"
                :src="scope.row.remark"
                :preview-src-list="[scope.row.remark]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="有效期"
            align="center"
            prop="certValidity"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.foreverValidity == "Y"
                  ? "永久有效"
                  : parseTime(scope.row.certValidity, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{
                scope.row.foreverValidity == "Y"
                  ? "正常"
                  : compareDate(scope.row.certValidity)
                  ? "正常"
                  : "已过期"
              }}
            </template>
          </el-table-column>
          <el-table-column label="借用状态" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{ scope.row.loan == "Y" ? "借用" : "正常" }}
            </template>
          </el-table-column>
          <el-table-column label="借用人" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{
                scope.row.loan == "Y" && scope.row.certUse
                  ? scope.row.certUse.useUser
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center" prop="directorName" />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="180"
          />
          <el-table-column label="创建人" align="center" prop="createBy" />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          />
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout=" ->,total, sizes, prev, pager, next, jumper "
          :total="total"
        >
        </el-pagination>
      </div>
      <div v-else-if="warningType == 4">
        <el-table :data="warnData">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column
            label="资质名称"
            align="center"
            fixed
            prop="qualificationTypeId"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="font-size: 13px"
                @click="drawer(scope.row)"
              >
                {{ scope.row.qualificationType.name }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="公司名称" align="center" prop="companyName" />
          <el-table-column label="资质编号" align="center" prop="certNumber" />
          <el-table-column
            label="有效期"
            align="center"
            prop="validityDate"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.foreverValidity == "Y"
                  ? "永久有效"
                  : parseTime(scope.row.validityDate, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="发证时间"
            align="center"
            prop="issueDate"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.issueDate, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发证机关" align="center" prop="issueUnit" />

          <el-table-column label="状态" align="center" prop="certNumber">
            <template slot-scope="scope">
              {{
                scope.row.foreverValidity == "Y"
                  ? "未过期"
                  : compareDate(scope.row.validityDate)
                  ? "未过期"
                  : "已过期"
              }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="负责人" align="center" prop="directorName" />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="180"
          />
          <el-table-column label="创建人" align="center" prop="createBy" />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          />
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout=" ->,total, sizes, prev, pager, next, jumper "
          :total="total"
        >
        </el-pagination>
      </div>
      <div v-else-if="warningType == 5">
        <el-table :data="warnData">
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>

          <el-table-column
            label="证书名称"
            fixed
            align="center"
            prop="certTypeId"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="font-size: 13px"
                @click="drawer(scope.row)"
              >
                {{
                  0 == scope.row.useType
                    ? scope.row.certName
                    : scope.row.certType.certName
                }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="使用公司" align="center" prop="useCompany" />
          <el-table-column label="类型" align="center" prop="useType">
            <template slot-scope="scope">
              {{ scope.row.useType == "0" ? "借入" : "借出" }}
            </template>
          </el-table-column>
          <el-table-column label="持有人" align="center">
            <template slot-scope="scope">
              {{
                0 == scope.row.useType
                  ? scope.row.belongerName
                  : scope.row.certInfo.belongerName
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="借用时间"
            align="center"
            prop="useDate"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.useDate, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="借用人" align="center" prop="useUser" />
          <el-table-column
            label="拟还时间"
            align="center"
            prop="expectReturnTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.expectReturnTime, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="实际归还时间"
            align="center"
            prop="actualReturnTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.actualReturnTime, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="returned">
            <template slot-scope="scope">
              {{ scope.row.returned == "Y" ? "已归还" : "未归还" }}
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center" prop="directorName" />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy" />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          >
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout=" ->,total, sizes, prev, pager, next, jumper "
          :total="total"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import csQr from "../csQr/index.vue";
import { mapGetters } from "vuex";
import {
  board,
  remind,
  trendChart,
  certDueSoon,
  certOverdue,
  qualDueSoon,
  qualOverdue,
  borrowReturnOverdue,
} from "../../api/enIndex";
import { treeselect, getTreeList } from "@/api/index";
export default {
  components: {
    csQr,
  },
  filters: {
    negative: function (val) {
      val = Math.abs(val) + "%";
      return val;
    },
    positive: function (val) {
      val = Math.abs(val) + "%";
      return val;
    },
  },
  data() {
    return {
      input: "",
      warningShow: false,
      warningShowEject: false,
      warningTitle: "芜湖起飞",
      warningType: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [], // 多选数组集合
      warnData: [],
      tableData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      userType: 1,
      npData: {
        qualSum: 0,
        certSum: 0,
        certificate: {
          date: 0,
          percentage: 0,
        },
        borrowReturn: {
          date: 0,
          percentage: 0,
        },
        qualification: {
          date: 0,
          percentage: 0,
        },
      },
      UserOptions: [
        {
          value: 11,
          label: "仅本人",
        },
        {
          value: 12,
          label: "本人及下属",
        },
        {
          value: 13,
          label: "仅本部门",
        },
        {
          value: 14,
          label: "本部门及下属部门",
        },
        {
          value: 0,
          label: "自定义",
        },
      ],
      TimeOptions: [
        {
          value: 1,
          label: "日",
        },
        {
          value: 2,
          label: "周",
        },
        {
          value: 3,
          label: "月",
        },
        {
          value: 4,
          label: "季",
        },
        {
          value: 5,
          label: "年",
        },
        {
          value: 0,
          label: "自定义",
        },
      ],
      typeOptions: [
        {
          value: 1,
          label: "证书",
        },
        {
          value: 2,
          label: "资质",
        },
      ],
      typeTimeOPtions: [
        {
          value: 1,
          label: "周",
        },
        {
          value: 2,
          label: "月",
        },
        {
          value: 3,
          label: "年",
        },
      ],
      typeTime: 1,
      typeMoney: 1,
      loading: false,
      timeShow: false,
      treeShow: false,
      expTime: 1,
      expUser: 11,
      userIds: [],
      timeVal: [],
      customTime: [],
      orderTitle: "日",
      orderUserTitle: "仅本人",
      echartsTitle: "新增证书趋势图",
      echartsText: "证书",
      echartstime: "周",
      isVip: true,
      warningData: {},
      dataTime: [],
      dataPrice: [],
      iptPh: "",
    };
  },
  computed: {
    ...mapGetters(["avatar"]),
  },
  created() {
    this.board();
    this.remind();
    this.trendChart();
  },
  mounted() {
    setTimeout(() => {
      this.drawLine();
    }, 1500);
  },
  methods: {
    // 获取即将到期证书
    getCertDueSoon() {
      certDueSoon({
        userIds: this.userIds,
        type: this.expUser,
        value: this.input,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.warnData = res.rows;
        this.total = res.total;
      });
    },
    // 获取到期证书
    getCertOverdue() {
      certOverdue({
        userIds: this.userIds,
        type: this.expUser,
        value: this.input,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.warnData = res.rows;
        this.total = res.total;
      });
    },
    // 获取即将到期资质
    getQualDueSoon() {
      qualDueSoon({
        userIds: this.userIds,
        type: this.expUser,
        value: this.input,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.warnData = res.rows;
        this.total = res.total;
      });
    },
    // 获取到期资质
    getQualOverdue() {
      qualOverdue({
        userIds: this.userIds,
        type: this.expUser,
        value: this.input,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.warnData = res.rows;
        this.total = res.total;
      });
    },
    // 获取已过期借还
    getBorrowReturnOverdue() {
      borrowReturnOverdue({
        userIds: this.userIds,
        type: this.expUser,
        value: this.input,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.warnData = res.rows;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      if (this.warningType == 1) {
        this.getCertDueSoon();
      } else if (this.warningType == 2) {
        this.getQualDueSoon();
      } else if (this.warningType == 3) {
        this.getCertOverdue();
      } else if (this.warningType == 4) {
        this.getQualOverdue();
      } else if (this.warningType == 5) {
        this.getBorrowReturnOverdue();
      }
    },
    // 分页器
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.warningType == 1) {
        this.getCertDueSoon();
      } else if (this.warningType == 2) {
        this.getQualDueSoon();
      } else if (this.warningType == 3) {
        this.getCertOverdue();
      } else if (this.warningType == 4) {
        this.getQualOverdue();
      } else if (this.warningType == 5) {
        this.getBorrowReturnOverdue();
      }
    },
    // 搜索
    search() {
      if (this.warningType == 1) {
        this.getCertDueSoon();
      } else if (this.warningType == 2) {
        this.getQualDueSoon();
      } else if (this.warningType == 3) {
        this.getCertOverdue();
      } else if (this.warningType == 4) {
        this.getQualOverdue();
      } else if (this.warningType == 5) {
        this.getBorrowReturnOverdue();
      }
    },
    // 关闭详细信息
    warnClose() {
      this.pageNum = 1;
      this.warnData = [];
      this.warningShowEject = false;
    },
    // 打开抽屉
    drawer() {},
    // 查看预警
    waramingLook(val) {
      this.warningShowEject = true;
      this.$nextTick(function () {
        if (val == 1) {
          this.getCertDueSoon();
          this.warningTitle = "即将到期证书";
          this.iptPh = "请输入证书名称/持有人";
        } else if (val == 2) {
          this.getQualDueSoon();
          this.warningTitle = "即将到期资质";
          this.iptPh = "请输入资质名称";
        } else if (val == 3) {
          this.getCertOverdue();
          this.warningTitle = "已到期证书";
          this.iptPh = "请输入证书名称/持有人";
        } else if (val == 4) {
          this.getQualOverdue();
          this.warningTitle = "已到期资质";
          this.iptPh = "请输入资质名称";
        } else if (val == 5) {
          this.getBorrowReturnOverdue();
          this.warningTitle = "已过期借还";
          this.iptPh = "请输入证书名称/持有人";
        }
        this.warningType = val;
        this.warningShow = true;
      });
    },
    // 证书资质预警
    remind() {
      remind({
        userIds: this.userIds,
        type: this.expUser,
      }).then((res) => {
        this.warningData = res;
      });
    },
    // echaets 时间
    typeTimeChange(item) {
      this.typeTime = item.value;
      this.echartstime = item.label;
      this.trendChart();
      // setTimeout(() => {
      //   this.drawLine();
      // }, 4000);
    },
    // echaets 证书/资质
    typeMoneyChange(item) {
      this.typeMoney = item.value;
      if (item.value == 1) {
        this.echartsText = item.label;
        this.echartsTitle = "新增证书趋势图";
      } else if (item.value == 2) {
        this.echartsText = item.label;
        this.echartsTitle = "新增资质趋势图";
      }
      this.trendChart();
      // setTimeout(() => {
      //   this.drawLine();
      // }, 500);
    },
    // 获取echarts
    async trendChart() {
      this.loading = true;
      let res = await trendChart({
        type: this.typeMoney,
        timeUnit: this.typeTime,
      });
      console.log(res);
      this.dataTime = res.dates;
      this.dataPrice = res.totals;
      this.loading = false;
      this.drawLine();
      // trendChart({
      //   type: this.typeMoney,
      //   timeUnit: this.typeTime,
      // }).then((res) => {
      // });
    },
    // 负责人选择之后切换
    treeSubmit() {
      if (this.userType == 1) {
        this.board();
        this.treeShow = false;
      }
    },
    // 选择
    handleSelectionChange(val) {
      this.userIds = [];
      if (val.length !== 0) {
        // console.log(val);
        val.forEach((item) => {
          if (this.userType == 1) {
            this.userIds.push(item.userId);
          }
        });
      }
    },
    userClose() {
      if (this.userType == 1) {
        if (this.userIds.length == 0) {
          this.expUser = 11;
          this.orderUserTitle = "仅本人";
          this.board();
        }
      }
    },
    // 获取部门人
    getdeptData(deptId) {
      getTreeList({
        status: "",
        deptId: deptId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 获取负责人
    treeselect() {
      treeselect().then((res) => {
        this.data = res.data;
        this.getdeptData(res.data[0].userId);
      });
    },
    // 树节点选择
    handleNodeClick(data) {
      this.getdeptData(data.id);
    },
    // 时间自定义关闭
    tiemClose() {
      if (this.userType == 1) {
        if (this.timeVal.length == 0) {
          this.expTime = 1;
          this.orderTitle = "日";
          this.board();
        }
      }
      this.customTime = [];
    },
    // 时间确定
    timeSubmit() {
      if (this.userType == 1) {
        this.timeVal = this.customTime;
        this.board();
        this.timeShow = false;
      } else if (this.userType == 2) {
        this.timeVal1 = this.customTime;
        this.salesKit();
        this.timeShow = false;
      }
    },
    // 看板负责人切换
    expUserChange(item) {
      if (item.value !== 0) {
        this.userIds = [];
        this.expUser = item.value;
        this.orderUserTitle = item.label;
        this.userType = 1;
        this.board();
        this.remind();
      } else {
        this.treeselect();
        this.expUser = item.value;
        this.orderUserTitle = item.label;
        this.userType = 1;
        this.treeShow = true;
      }
    },
    // 看板日期切换
    expTimeChange(item) {
      if (item.value !== 0) {
        this.timeVal = [];
        this.expTime = item.value;
        this.orderTitle = item.label;
        this.userType = 1;
        this.typeTimeChange(item);
        this.board();
      } else {
        this.expTime = item.value;
        this.userType = 1;
        this.orderTitle = item.label;
        this.timeShow = true;
      }
    },
    // 获取看板信息
    board() {
      board({
        userIds: this.userIds,
        timeUnit: this.expTime,
        type: this.expUser,
        times: this.timeVal,
      }).then((res) => {
        console.log(res);
        this.npData = res;
      });
    },
    async drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("echarts"));
      // 绘制图表
      await myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.dataTime,
          },
          yAxis: {
            type: "value",
            minInterval: 1, //不允许出现小数位
          },
          series: [
            {
              data: this.dataPrice,
              type: "line",
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1267fa", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFFFFF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              itemStyle: {
                normal: {
                  color: "#1267fa",
                  // background: 'linear-gradient(0deg, rgba(18, 103, 250, 0.01) 0%, #1267FA 100%)'
                },
              },
            },
          ],
          grid: {
            left: "20px",
            right: "20px",
            containLabel: true,
          },
        },
        true
      );
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  background-color: #f5f6f7;
  height: 92.4vh;
  overflow: auto;
}
.vipTips {
  margin-top: 20px;
  padding: 20px;
  color: #fff;
  align-items: center;
  height: 70px;
  display: flex;
  background-color: #dc5049;
  border-radius: 10px;
  .el-button {
    color: #dc5049;
    border: none;
  }
  .vipTips-title {
    margin-right: 20px;
  }
}
.header-img {
  display: flex;
  align-items: center;
  width: 100%;
  height: 160px;
  background-size: 100% 100%;
  // padding-top: 47px;
  border-radius: 18px;
  margin-top: 24px;
  overflow: hidden;
  .header-img-left {
    // padding-top: 20px;
    height: 100%;
    width: 50%;
    background-color: #1c1c1c;
    line-height: 100%;
    display: flex;
    align-items: center;
    img {
      vertical-align: middle;
    }
    .header-img-left-text {
      margin-left: 34px;
      h1 {
        color: #fff;
        font-size: 30px;
        font-family: SourceHanSans-Heavy, SourceHanSans;
        font-weight: 800;
      }
      div {
        color: #ffffff;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .header-img-right {
    height: 100%;
    width: 50%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .right-img {
      position: absolute;
      top: 0;
      right: 25%;
      width: 357px;
      height: 100%;
    }
  }
  .avatar {
    width: 110px;
    height: 110px;
    border-radius: 110px;
    background-color: #fff;
    margin-left: 5%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 110%;
    }
  }
}
.Overview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .Overview-top-title {
    font-size: 16px;
    font-weight: 700;
  }
  /deep/ .el-select {
    width: 120px;
    input {
      border: none;
    }
  }
  .el-select:nth-child(2) {
    width: 150px;
  }
}
.Overview {
  margin-top: 20px;
  padding: 14px;
  width: 100%;
  height: 150px;
  border-radius: 18px;
  background-color: #fff;
  .Overview-detail {
    display: flex;
    justify-content: space-around;
    margin-top: 24px;
    .Overview-detail-single {
      height: 50px;
      width: 25%;
      padding-left: 20px;
      .Overview-detail-single-top {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9aa1af;
      }
      .Overview-detail-single-bottom {
        font-size: 26px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #1f2e4d;
        margin-top: 10px;
      }
    }
    .Overview-detail-single:nth-child(-n + 4) {
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
.active {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3ccea8;
  margin-left: 12px;
}
.active1 {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f04d4c;
  margin-left: 12px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 30px;
  .footer-left {
    width: 30%;
    height: 516px;
    border-radius: 18px;
    background-color: #fff;
    padding: 24px;
    .footer-left-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/ .el-select {
        width: 150px;
        input {
          border: none;
        }
      }
    }
    .footer-left-title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 700;
      color: #2b2b2b;
    }
    .earlyWarning {
      width: 100%;
      height: 93px;
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      .earlyWarning-img {
        width: 46px;
        height: 46px;
        border-radius: 6px;
        img {
          width: 100%;
          height: 100%;
        }
        .earlyWarning-detail {
          margin-left: 24px;
          .earlyWarning-detail-num {
            font-size: 22px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #2b2b2b;
          }
          .earlyWarning-detail-info {
            margin-top: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            width: 200px;
          }
        }
        display: flex;
      }
      .earlyWarning-right {
        margin-top: 12px;
      }
    }
    .earlyWarning:nth-child(-n + 4) {
      border-bottom: 1px solid #ececec;
    }
  }
  .footer-right {
    box-sizing: border-box;
    border-radius: 18px;
    width: 68%;
    height: 516px;
    background-color: #fff;
    position: relative;
    padding: 14px;
    .footer-right-sel {
      z-index: 200;
      position: absolute;
      top: 24px;
      right: 24px;
      /deep/ .el-select {
        width: 80px;
        input {
          border: none;
        }
      }
    }
    #echarts {
      height: 100%;
    }
  }
}
.TreeChioosse {
  display: flex;
  justify-content: space-around;
  .TreeChioosse-tree {
    overflow: auto;
    height: 600px;
    width: 30%;
  }
  .TreeChioosse-table {
    width: 65%;
    .el-table {
      margin-top: 0;
      border-bottom: none !important;
    }
    .el-table::before {
      display: none;
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.dialogTitle {
  display: flex;
  align-items: center;
  .input {
    display: flex;
    margin-left: 30%;
    /deep/ .el-input__inner {
      height: 40px;
    }
  }
}
</style>